<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-date-picker v-model="pickerDate" :editable="false" :clearable="false" value-format="yyyy.MM.dd"
                        type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期"
                        end-placeholder="结束日期" :picker-options="pickerOptions" @change="dateChange"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
            </el-form>
            <p><span>{{store_name}}</span><span style="margin-left:20px">{{area_name}} - {{project_type}} - {{no}}</span></p>
            <!-- 表格 -->
            <el-table highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border>
                <el-table-column align="center" label='卡头ID' prop="machine_id"></el-table-column>
                <el-table-column align="center" label='刷卡价格'>
                    <template slot-scope="scope">
                        <div style="display:flex;justify-content:space-around">
                            <span>会员：{{scope.row.vip_price}}</span>
                            <span>非会员：{{scope.row.no_vip_price}}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label='收币数' prop="push_coins"></el-table-column>
                <el-table-column align="center" label='收币金额' prop="push_money"></el-table-column>
            </el-table>
            <!-- <el-table highlight-current-row show-summary :data="list" size="small" v-loading.body="listLoading" border>
                <el-table-column align="center" label="机台编号" sortable>
                    <template slot-scope="scope">
                        {{scope.row.area_name+'-'+scope.row.no}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='机台名称' prop="project_type"></el-table-column>
                <el-table-column align="center" label='神采礼品编号'>
                    <template slot-scope="scope">
                        {{scope.row.no_obsolete}}
                    </template>
                </el-table-column>
                <el-table-column align="center" label='礼品名称' prop="gift_name"></el-table-column>
                <el-table-column sortable align="center" label='出货数' prop="unitsshipped"></el-table-column>
                <el-table-column sortable align="center" label='出货成本' prop="money_cost"></el-table-column>
            </el-table> -->
        </div>
    </div>
</template>
<script>
    import { getList } from "@/api/storage_control/one_machine_detail";
    import { pickerOptionsF, pickerDateF, optionMaxTime, today } from '@/utils';
    export default {
        data() {
            return {
                list: [],
                listLoading: false,
                formInline: {},
                pickerOptions: pickerOptionsF(-1),
                pickerDate: pickerDateF(-1, -1),
                store_name:"",
                area_name:"",
                project_type:"",
                no:"",
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {//当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
                vm.beforeComingIn();
            })
        },
        methods: {
            beforeComingIn() {
                //console.log(this.$route.params)
                if (this.$route.params.routerflag) {
                    this.formInline.store_id = this.$route.params.store_id;
                    this.formInline.project_id = this.$route.params.project_id;
                    this.pickerDate = this.$route.params.pickerDate;
                    this.store_name = this.$route.params.store_name;
                    this.area_name = this.$route.params.area_name;
                    this.project_type = this.$route.params.project_type;
                    this.no = this.$route.params.no;
                    this.searchClick();
                }
            },
            dateChange() {
                this.searchClick();
            },
            // 搜索
            searchClick() {
                if (!this.formInline.store_id) {
                    this.$message({ type: 'error', message: '筛选条件已失效，请关闭此页面，重新跳转' });
                    return;
                }
                this.formInline.start_time = this.pickerDate[0].replace(/\./g,"-")
                this.formInline.end_time = this.pickerDate[1].replace(/\./g,"-")
                this.fetchData();
            },
            fetchData() {//es6默认值
                this.listLoading = true;
                getList(this.formInline).then(response => {
                    if(response.code==1){
                        response.message.forEach(val=>{
                            val.push_coins/=1;
                            val.push_money=(val.push_money/1).toFixed(2)/1;
                        })
                        this.list = response.message;
                    }
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
                // getList(this.formInline).then(response => {
                //     response.forEach(val => {
                //         val.unitsshipped *= 1;
                //         val.money_cost = (val.money_cost / 1000000).toFixed(2) * 1;
                //     });
                //     this.list = response;
                //     this.listLoading = false;
                // })
            }
        }
    }
</script>